<template>
  <view class="container">
    <u-navbar title="推广海报" title-size="36"></u-navbar>
    <view class="poster">
      <image class="poster-img" :src="img" mode=""></image>
      <view class="info-box">
        <canvas id="qrcode" canvas-id="qrcode" style="width: 80px; height: 80px"></canvas>

        <view class="salesman-info">
          <view class=""> 业务员：{{ userInfo.nickname }} </view>
          <view class="" v-if="salesCode"> 引荐码：{{ salesCode }} </view>
          <view class=""> 电话：{{ userInfo.mobile }} </view>
        </view>
      </view>
      <!-- <view class="save-btn">
				保存至相册
			</view> -->
    </view>
  </view>
</template>

<script>
import UQRCode from 'uqrcodejs'
import { STATIC_URL } from '@/common/config.js'
export default {
  data() {
    return {
      salesCode: '',
      userInfo: '',
      img: ''
    }
  },
  onReady() {
    // 获取uQRCode实例
    var qr = new UQRCode()
    // 设置二维码内容
    qr.data = STATIC_URL + '/h5?brokerageCode=' + uni.getStorageSync('salesCode')
    // 设置二维码大小，  必须与canvas设置的宽高一致
    qr.size = 80
    // 调用制作二维码方法
    qr.make()
    // 获取canvas上下文
    var canvasContext = uni.createCanvasContext('qrcode', this) // 如果是组件，this必须传入
    // 设置uQRCode实例的canvas上下文
    qr.canvasContext = canvasContext
    // 调用绘制方法将二维码图案绘制到canvas上
    qr.drawCanvas()
  },
  onLoad() {
    this.userInfo = uni.getStorageSync('userInfo')
    this.salesCode = uni.getStorageSync('salesCode')
    this.$u.get('/app-api/trade/config/get').then((res) => {
      this.img = res.data.brokeragePosterUrls[0]
    })
  },

  methods: {}
}
</script>

<style>
page {
  background-color: #f7f7f7;
}
.container {
  padding: 50rpx;
}
.poster {
  width: 650rpx;
}
.poster-img {
  width: 650rpx;
  height: 690rpx;
}
.info-box {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 20rpx;
}
.code {
  width: 166rpx;
  height: 166rpx;
  margin-right: 15rpx;
}
.salesman-info {
  margin-left: 20rpx;
  line-height: 60rpx;
}
.save-btn {
  width: 400rpx;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  color: #fff;
  background-color: #4396e0;
  border-radius: 40rpx;
  margin: 120rpx 0 0 125rpx;
}
</style>
